import React from 'react';
import Taro from "@tarojs/taro";
import { View, Text, Image } from "@tarojs/components";
import { observer } from "mobx-react";
import { Wallet_Store_Key } from "@/models/wallet";
import { norInject, INorInjectProps } from "@/models";
import i18n from 'i18n-js';
import { GButton } from '@/components/GButton';
import ListItem from '@/components/ListItem';
import PageContainer from "@/components/PageContainer";
import {
  GStyleSheet,
  DynamicColors,
  GDynamicValue,
} from "@/utils/DarkMode";
import desIcon from '@/assets/images/my_recharg_icon_description.png';
import billIcon from '@/assets/images/my_recharg_icon_billing.png';
import feedbackIcon from '@/assets/images/my_recharg_icon_feedback.png';
import gizCoinIcon from '@/assets/images/my_recharg_icon_gizwits_beans.png';


const dstyles = GStyleSheet.create({
  navbar: {
    backgroundColor: DynamicColors.tintColor,
  },
  container: {
    width: '100%',
    height: '100%',
    flex: 1,
    flexDirection: 'column',
    backgroundColor: DynamicColors.screenBackgroundGaryColor,
    position: 'relative',
  },
  gradient: {
    position: 'absolute',
    height: '35%',
    width: '100%',
    top: -100,
    left: 0,
    background: `linear-gradient(180deg,${DynamicColors.tintColor.value}, transparent)`,
    zIndex: 2,
  },
  listItem: {
    borderRadius: 10,
    borderBottomWidth: 0,
  },
  balanceCard: {
    backgroundColor: DynamicColors.cardBackgroundColor,
    borderRadius: 10,
    padding: 30,
    marginBottom: 15,
    height: 240,
    marginTop: 30,
    position: 'relative',
    zIndex: 99,
  },
  balanceTitleBox: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingLeft: 10,
    paddingRight: 10,
  },
  balanceTitle: {
    fontSize: 18,
    // lineHeight: 30,
    color: DynamicColors.normalTextColor,
  },
  balanceBox: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  balance: {
    fontSize: 40,
    marginBottom: 5,
    color: DynamicColors.normalTextColor,
  },
  balanceTips: {
    fontSize: 14,
    color: DynamicColors.subTitleTextColor,
  },
  expense: {
    color: DynamicColors.titleTextColor,
  },
  chargeBtn: {
    marginTop: 40,
    width: '35%',
  },
  gizCoinTips: {
    // lineHeight: 16,
    fontSize: 14,
    color: new GDynamicValue('#888', '#f1f1f1'),
  },
  gizCoinIcon: {
    height: 16,
    width: 16,
    marginHorizontal: 2,
  },
  row: {
    flexDirection: 'row',
    display: 'flex',
  },
  tipIcon: {
    width: 25,
    height: 25
  },
  tipTextView: {
    marginTop: 10,
  }
});

interface IProps extends INorInjectProps {

}

@norInject(Wallet_Store_Key)
@observer
export default class Wallet extends React.Component<IProps> {
  // static navigationOptions = ({ navigation }) => {
  //   const right = navigation.getParam('headerRight');
  //   return {
  //     title: i18n.t('WALLET'),
  //     headerStyle: {
  //       elevation: 0,
  //       shadowOpacity: 0,
  //       borderBottomWidth: 0,
  //       shadowColor: 'transparent',
  //     },
  //     headerTransparent: true,
  //     headerTintColor: '#fff',
  //     headerTitleStyle: {
  //       color: '#fff',
  //     },
  //     headerRight: right && right(),
  //   };
  // };

  state = {
  }

  componentWillMount() {
    this.queryData();
    // navigation.setParams({
    //   headerRight: () => {
    //     const styles = dstyles.style;
    //     return <Text onPress={this.goChargeRecord} style={styles.headerRight}>{i18n.t('CHARGE_RECORD')}</Text>;
    //   },
    // });
  }

  queryData = () => {
    const { wallet } = this.props;
    wallet!.getBalance();
    wallet!.getPrice();
  }

  goChargeRecord = () => {
    Taro.navigateTo({ url: "/pages/wallet/ChargeRecord" });
  }

  goCharge = () => {
    Taro.navigateTo({ url: "/pages/wallet/Charge" });
  }

  goToWalletDescription = () => {
    Taro.navigateTo({ url: "/pages/wallet/WalletDescription" });
  }

  goConsumeRecord = () => {
    Taro.navigateTo({ url: "/pages/wallet/ConsumeRecord" });
  }

  goFeedback = () => {
    Taro.navigateTo({ url: "/pages/feedback/index" });
  }

  render() {
    const styles = dstyles.style;
    const { wallet: { balance, price } } = this.props;
    const GIZ_COIN = i18n.t('GIZ_COIN');
    return (
      <PageContainer title={i18n.t("WALLET")} onShow={this.queryData}>
        <View style={styles.container}>
          <View
            style={{
              flex: 1,
              paddingLeft: 15,
              paddingRight: 15,
            }}
          >
            <View style={styles.balanceCard}>
              <View style={styles.balanceTitleBox}>
                <Text style={styles.balanceTitle}>
                  {GIZ_COIN}
                  {i18n.t('BALANCE')}
                </Text>
                <View onClick={this.goToWalletDescription}>
                  <Image src={desIcon} style={{ width: 30, height: 30 }} />
                </View>
              </View>
              <View style={styles.balanceBox}>
                <Image src={gizCoinIcon} style={{ width: 22, height: 22, marginRight: 5 }} />
                <Text style={styles.balance}>
                  {balance || 0}
                </Text>
              </View>
              <View style={{ ...styles.row, alignItems: 'flex-start' }}>
                <Text style={styles.balanceTips}>{i18n.t('NOW_EXPENSE')}</Text>
                <View style={{ ...styles.row, flexWrap: 'wrap', flex: 1 }}>
                  <View style={styles.row}>
                    <Text style={styles.balanceTips}>
                      {i18n.t('PHONE_CALL')}
                      <Text style={styles.expense}>
                        {price[2] || 3}
                      </Text>
                    </Text>
                    <Image src={gizCoinIcon} style={styles.gizCoinIcon} />
                    <Text style={styles.balanceTips}>
                      <Text style={styles.expense}>
                        /{i18n.t('TIMES')},
                      </Text>
                    </Text>
                  </View>
                  <View style={styles.row}>
                    <Text style={styles.balanceTips}>
                      {i18n.t('MESSAGE')}
                      <Text style={styles.expense}>
                        {price[1] || 1}
                      </Text>
                    </Text>
                    <Image src={gizCoinIcon} style={styles.gizCoinIcon} />
                    <Text style={{ ...styles.balanceTips, ...styles.expense }}>
                      / {i18n.t('A')}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={{ alignItems: 'center' }}>
                <GButton
                  style={styles.chargeBtn}
                  text={i18n.t('GO_CHARGE')}
                  onPress={this.goCharge}
                />
              </View>
            </View>
            <View style={styles.gradient} />
            <ListItem
              style={{ ...styles.listItem, marginBottom: 15 }}
              icon={<Image src={billIcon} style={styles.tipIcon} />}
              onPress={this.goChargeRecord}
            >
              {i18n.t('CHARGE_RECORD')}
            </ListItem>
            <ListItem
              style={{ ...styles.listItem, marginBottom: 15 }}
              icon={<Image src={billIcon} style={styles.tipIcon} />}
              onPress={this.goConsumeRecord}
            >
              {i18n.t('CONSUME_RECORD')}
            </ListItem>
            <ListItem
              style={styles.listItem}
              icon={<Image src={feedbackIcon} style={styles.tipIcon} />}
              onPress={this.goFeedback}
            >
              {i18n.t('FEED_BACK')}
            </ListItem>
            <View style={styles.tipTextView}>
              <Text style={styles.gizCoinTips}>
                {i18n.t('GIZ_COIN_TIPS1', { name: GIZ_COIN })}
              </Text>
            </View>
            <View style={styles.tipTextView}>
              <Text style={styles.gizCoinTips}>
                {i18n.t('GIZ_COIN_TIPS2', { name: GIZ_COIN })}
              </Text>
            </View>
          </View>
        </View>
      </PageContainer >
    );
  }
}
